<template>
  <view class="login-view">
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="data.msgType" :message="data.messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
    <!-- 邮箱登录 -->
    <view class="login-tag">
      <view class="trip-index"></view>
      邮箱登录
    </view>
    <!-- 邮箱和密码输入 -->
    <view>
      <view class="input-box">
        <input v-model="data.mailAccount" class="l-input" type="email" placeholder="邮箱号"/>
      </view>
      <view class="input-box">
        <input v-model="data.password" :password=!data.showPassword class="l-input" placeholder="密码"/>
        <view @click="changePassword">
          <uni-icons v-if="data.showPassword==true" type="eye" size="30"></uni-icons>
          <uni-icons v-else type="eye-slash" size="30"></uni-icons>
        </view>
      </view>

    </view>
    
    
    <!-- 登录按钮 -->
    <view class="login-act-box">
      <button class="s-button" @click="login">登录</button>
      <button class="s-button" @click="register">注册</button>
    </view>

  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import helper from '../../common/helper.js'

const data = reactive({
  mailAccount:"",
  password:"",
  showPassword:false,
  msgType:"",
  messageText:"",
});

const message = ref(null)

function messageToggle(type,text) {
  data.msgType = type
  data.messageText = text
  message.value.open()
}

function changePassword() {
    data.showPassword = !data.showPassword;
}

function login(){
  console.log("登录")
  if(data.mailAccount!=null&&data.mailAccount.trim() != ""&&data.password!=null&&data.password.trim() != ""){
    console.log(data.mailAccount+" "+data.password)
    //获取设备号
    const systemInfo = uni.getSystemInfoSync();
    console.log(systemInfo.deviceId); // 包含设备型号、系统版本等信息
    
    //发送请求
    uni.request({
        url: helper.webUrl+'/user/loginUser', 
        method:'POST',
        header: {
            'Content-Type': 'application/json' //自定义请求头信息
        },
        data: {
          mailAccount: data.mailAccount,
          password:data.password,
          deviceId:systemInfo.deviceId
        },
        success: (res) => {
          console.log(res.data);
          if(res.data.code == 200){
            messageToggle("success",res.data.msg)
            helper.login(res)
            let curUser = uni.getStorageSync("curUser")
            console.log(curUser)
            uni.navigateBack()
          }else{
            messageToggle("info",res.data.msg)
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
        }
    });
  }
}

function register(){
  console.log("注册")
  uni.navigateTo({
    url:"/subpages/userRegister/userRegister?work=注册"
  })
}
</script>

<style>
.login-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.login-tag{
  font-size: 25px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.trip-index{
  width:5px;
  height: 25px;
  background-color: #89C0FF;
  margin-right: 10px;
}
.input-box{
  width: 80%;
  height: 45px;
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-inline: auto;
  border-radius: 10px;
  background-color: #fff; 
  margin-top: 15px;
}
.l-input{
 margin-left: 2%;
 width: 100%;
 height: 100%;
}
.uni-icon {
  font-family: uniicons;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #999999;
}

.uni-eye-active {
  color: #007AFF;
}
.login-act-box{
  display: flex;
  width: 90%;
  margin-inline: auto;
}
.s-button{
  width: 45%;
  background-color: #89C0FF;
  color: #fff;
  font-size: 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

</style>
